<template>
    <!-- 库存下限设置弹窗 -->
    <div class="dialog-box">
        <el-dialog :modelValue="dialogVisible" @update:modelValue="updateVisible" title="更多库存下限设置" width="700" destroy-on-close>
            <div class="search-box">
                <el-input v-model="searchKeyword" style="width: 300px;" placeholder="仓库名称" clearable>
                    <template #prefix>
                        <el-icon><Search /></el-icon>
                    </template>
                </el-input>
            </div>
            
            <div class="table-container">
                <el-table :data="warehouseList" border>
                    <el-table-column type="selection" width="50" align="center" />
                    <el-table-column label="仓库名称" prop="name" align="center" />
                    <el-table-column label="库存下限" align="center">
                        <template #default="scope">
                            <el-input v-model="scope.row.limit" placeholder="请输入" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="100">
                        <template #default="scope">
                            <el-button type="primary" link @click="handleClear(scope.row)">清空</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="options-container">
                <el-radio-group v-model="limitType">
                    <el-radio :label="0">无限制</el-radio>
                    <el-radio :label="1">仅限同类型产品</el-radio>
                    <el-radio :label="2">同步所有产品</el-radio>
                </el-radio-group>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleCancel">取消</el-button>
                    <el-button type="primary" @click="handleConfirm" color="#626aef">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, defineEmits, defineProps, defineExpose, watch } from "vue";
import { Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

// 接收父组件传入的值
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    productId: {
        type: [String, Number],
        default: ''
    },
    initialLimits: {
        type: Array,
        default: () => []
    }
});

const emit = defineEmits(['update:dialogVisible', 'confirm', 'cancel']);

// 内部可变状态
const innerVisible = ref(false);

// 更新visible状态
const updateVisible = (val: boolean) => {
    emit('update:dialogVisible', val);
};

// 监听props变化
watch(() => props.dialogVisible, (val) => {
    innerVisible.value = val;
    if (val) {
        // 当弹窗显示时，初始化数据
        initData();
    }
}, { immediate: true });

// 监听initialLimits变化
watch(() => props.initialLimits, () => {
    if (props.dialogVisible) {
        initData();
    }
}, { deep: true });

// 仓库列表数据
const warehouseList = ref([
    { id: 1, name: 'XXXXXX仓库', limit: '' },
    { id: 2, name: 'XXXXXX仓库', limit: '' },
    { id: 3, name: 'XXXXXX仓库', limit: '' },
    { id: 4, name: 'XXXXXX仓库', limit: '' }
]);

// 搜索关键词
const searchKeyword = ref('');

// 限制类型
const limitType = ref(0);

// 初始化数据
onMounted(() => {
    initData();
});

// 初始化数据
const initData = () => {
    if (props.initialLimits && props.initialLimits.length > 0) {
        // 初始化已有的库存下限数据
        props.initialLimits.forEach((item: any) => {
            const warehouse = warehouseList.value.find(w => w.id === item.warehouseId);
            if (warehouse) {
                warehouse.limit = item.limit;
            }
        });
    }
};

// 监听搜索关键词变化
watch(searchKeyword, (newVal) => {
    // 实际应用中可能需要从后端获取数据
    // 这里仅做简单演示
});

// 清空按钮处理
const handleClear = (row: any) => {
    row.limit = '';
};

// 取消按钮处理
const handleCancel = () => {
    emit('update:dialogVisible', false);
    emit('cancel');
};

// 确认按钮处理
const handleConfirm = () => {
    // 收集所有设置的仓库库存下限
    const limits = warehouseList.value
        .filter(item => item.limit !== '')
        .map(item => ({
            warehouseId: item.id,
            warehouseName: item.name,
            limit: item.limit
        }));

    emit('confirm', {
        limits,
        limitType: limitType.value
    });
    emit('update:dialogVisible', false);
};

// 对外暴露方法
defineExpose({
    // 可以添加需要暴露给父组件的方法
});
</script>

<style lang="scss" scoped>
.search-box {
    margin-bottom: 15px;
}

.table-container {
    margin-bottom: 20px;
}

.options-container {
    margin-bottom: 10px;
}

::v-deep .el-dialog {
    --el-dialog-padding-primary: 0px;
}

::v-deep .el-dialog__header {
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: bold;
}

::v-deep .dialog-footer {
    padding: 10px 16px;
    border-top: 1px solid #f0f0f0;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: #000;
}

::v-deep .el-dialog__body {
    padding: 20px 30px;
}


</style> 